import React, {  FC, useState, useReducer } from 'react'

type StateType = { count: number }
type ActionType = { type: string }

const initialState: StateType = { count: 100 }

// 根据传入的action 返回新的state (不可变数据)
function reducer(state: StateType, action:ActionType){
    switch(action.type){
        case 'increment':
            return { count: state.count + 1 }
        case 'decrement':
            return { count: state.count + 1 }
        default: 
            throw new Error()
    }
}
const CountReducerTwo: FC = () =>{
    // const [count, setCount ] = useState(100)

    const [state, dispatch] = useReducer(reducer,initialState)
    // console.log('state',state)
    const {count} = state
    return (
        <>
            <span>count: {count}</span>
            {/* <button onClick={()=> setCount(count + 1)}>+</button>
            <button onClick={()=> setCount(count - 1)}>-</button> */}
            <button onClick={()=> dispatch({type:'increment'})}>+</button>
            <button onClick={()=> dispatch({type:'decrement'})}>-</button>
        </>
    )
}

export default CountReducerTwo